import Vue from 'vue'
import Vuex from 'vuex'
//引入数据持久化插件
import createPer from 'vuex-persistedstate'

Vue.use(Vuex)

//vuex 刷新时，购物车中的数据 丢失
export default new Vuex.Store({
  plugins:[createPer()],//持久存储数据
  state: {
    goods:[],//购物车的商品初始化
  },
  mutations: { //更改store中的state的值； 建议：在mutations制作更改store中的state的值
    //添加购物车
    //state状态值 payload载荷(参数)
    ADD_CART(state,payload){
      //将内容页面的数据推到goods数组里
      state.goods.push(payload);
    },
    //修改该购物车中的商品数量
    UPDATE_CART(state,payload){
      state.goods = payload
    }
  },
  //可以做异步操作，调用mutation ; 还可以处理大量的逻辑运算
  actions: {
    //添加购物车的action
    //分析：如果是第一次，购物车中就不存在该条记录
    //如果是非第一次，购物车中已经存在该条记录
    ADD_CART_AC(context,item){
      var newArr = [...this.state.goods];//使用展开运算符，使goods和newArr不在是指向同一个地址空间了
      //判断商品是不是第一次添加到购物车
      //findIndex寻找数组中是否存在该条记录，如果找到返回数组下标，没找到返回-1
      let index = newArr.findIndex(val => val.item_id === item.item_id);
      console.log(index);
      if(index === -1){
        //调用mutation
        context.commit('ADD_CART',item)
      }else{
        //更改商品数量
        newArr[index].num++;
        //调用修改的mutation
        context.commit('UPDATE_CART',newArr);
      }

      
    }
  },
  modules: {
  }
})
